let id1 = location.search.split("=")[1];
axios.get('http://jx.xuzhixiang.top/ap/api/detail.php', {
    params: {
        id: id1
    }
}).then((ret) => {
    let spXq = ret.data.data
    console.log(spXq);
    let spa = `
    <div>
                <div id="xpXq-img">
                    <ol id="xpXq-img-p">
                    <img src="${spXq.pimg}">
                    <p id="xpXq-zoom-fd"></p>
                    </ol>
                    <ul>
                        <li class="xpXq-img-x"><img src="${spXq.pimg}"></li>
                        <li class="xpXq-img-x"><img src="${spXq.pimg}"></li>
                        <li class="xpXq-img-x"><img src="${spXq.pimg}"></li>
                        <li class="xpXq-img-x"><img src="${spXq.pimg}"></li>
                        <li class="xpXq-img-x"><img src="../img/spLeibiao/2wm.png"></li>
                        <li id="xpXq-img-fd"><img src="${spXq.pimg}"></li>
                    </ul>
                </div>
                <div>
                    <p>${spXq.pname}</p>
                    <p>
                        <span>
                            <i>聚划算</i>
                            <em>此商品正在参加聚划算，请尽快购买！</em>
                        </span>
                        <span>
                            <i>价格</i>
                            <em><b>￥</b>${spXq.pprice}</em>
                        </span>
                    </p>
                    <p><span><i>月销量</i>${spXq.pprice*100}</span><span><i>送天猫积分</i>${spXq.pprice}</span></p>
                    <p>
                        <span>数量</span>
                        <input type="text" value=1 id="xqy-val">
                        <b><span id="xqy-add">∧</span><span id="xqy-sub">∨</span></b>
                        <span>件</span>
                        <span>有货</span>
                    </p>
                    <button id="xqy-addgwc" data-od=${spXq.pid}>加入超市购物车</button>
                    <p><span>配送范围</span><span>送货范围仅限焦作、南阳、驻马店、洛阳、开封、三门峡、新乡、郑州、鹤壁、周口、安阳、漯河、商丘、濮阳、济源、许昌、平顶山、信阳地区(生鲜类别仅限部分地区)</span>
                    </p>
                </div>
            </div>
    `
    document.querySelector("#xqy-box").innerHTML = spa
    let spVal = n = 1

    $("#xqy-add").click(function () {
        spVal = $("#xqy-val").val()
        n++
        $("#xqy-val").val(n)
    })
    $("#xqy-sub").click(function () {
        spVal = $("#xqy-val").val()
        n--
        if (n <= 1) {
            n = 1
        }
        $("#xqy-val").val(n)
    })
    $("#xqy-addgwc").click(function () {
        axios.get('http://jx.xuzhixiang.top/ap/api/add-product.php', {
            params: {
                uid: "133850",
                pid: $(this).attr("data-od"),
                pnum: $("#xqy-val").val()
            }
        }).then((ret) => {
            console.log(ret.data)
        })
    })
    $(".xpXq-img-x img").each(function (i, ele) {
        $(".xpXq-img-x img").eq(i).click(function () {
            $("#xpXq-img img").eq(0).prop("src", $(this).prop("src"))
            $("#xpXq-img-fd img").prop("src", $(this).prop("src"))
        })
    })
    $("#xpXq-img-p").mouseover(function () {
        $("#xpXq-zoom-fd").fadeIn(1)
        $("#xpXq-img-fd").fadeIn(1)
    })
    $("#xpXq-img-p").mouseout(function () {
        $("#xpXq-zoom-fd").fadeOut(1)
        $("#xpXq-img-fd").fadeOut(1)
    })
    $("#xpXq-img-p").mousemove(function (e) {
        let maxW = $(this).prop("offsetWidth") - $("#xpXq-zoom-fd").prop("offsetWidth"),
            maxH = $(this).prop("offsetHeight") - $("#xpXq-zoom-fd").prop("offsetHeight"),
            x = e.pageX - $(this).prop("offsetLeft") - $("#xpXq-zoom-fd").prop("offsetWidth") / 2,
            y = e.pageY - $(this).prop("offsetTop") - $("#xpXq-zoom-fd").prop("offsetHeight") / 2;
        x = x <= 0 ? 0 : x >= maxW ? maxW : x
        y = y <= 0 ? 0 : y >= maxH ? maxH : y
        $("#xpXq-zoom-fd").css("left", x)
        $("#xpXq-zoom-fd").css("top", y)
        $("#xpXq-img-fd img").css("left", -2 * x)
        $("#xpXq-img-fd img").css("top", -2 * y)
    })
})